import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import Tab from './Tab';
import ChangePassword from '../changePassword/index';
import SecondaryVerification from '../secondaryVerification/index';
import SecretGuard from '../../secretGuard/index';
import '../../../style/passwordSetting.less';

@inject('passwordSetting')
@observer
export default class PasswordSetting extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		this.props.passwordSetting.init();
	}

	render() {
		const {
			passwordSetting: store
		} = this.props, {
			selectedKey,
		} = store;

		let content;
		if (selectedKey === '0') {
			content = <ChangePassword hasTitle={false} {...this.props}/>
		} else if (selectedKey == "1")  {
			content = <SecondaryVerification />
		}else{
			content = <SecretGuard inTab={true}/>
		}
		
		return (
			<div className='passwordSetting'>
				<Tab store={store}/> 
				{content}
			</div>
		);
	}
}